<template>
	<div style="height:100%">
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money ">
						<div class="money-li" v-for="(item, index) in topList" :key="index">
							<div class="title">{{ item.name }}</div>
							<div class="num">{{ item.startTime }}</div>
							<div class="money-li-child ">
								<div class="title">签到次数</div>
								<div class="num">{{ item.number }}</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-select>
				<div style="margin:0 20px">
					<el-select
						size="mini"
						filterable
						v-model="select.redPacket"
						placeholder="筛选时间点"
						style="margin-right: 10px;width:100px;"
						@change="val => crud.refresh({ sceneKey: val, page: 1 })"
					>
						<el-option label="全部" value=""> </el-option>
						<el-option
							v-for="(item, index) in selectList"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
				<date-picker
					@change="val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })"
					@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
				></date-picker>
			</template>
			<template #table-column-updateTime="{scope}">
				{{ scope.row.updateTime | date_format }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';

export default {
	data() {
		return {
			select: {
				redPacket: ''
			},
			selectList: [],
			topList: []
		};
	},
	components: {
		DatePicker
	},
	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.bwbtGold)
				.set('table', {
					columns: [
						{
							prop: 'nickName',
							label: '用户名',
							align: 'center'
						},
						{
							prop: 'phone',
							label: '手机账号',
							align: 'center'
						},
						{
							prop: 'remark',
							label: '红包名称',
							align: 'center'
						},
						{
							prop: 'gold',
							label: '金币数',
							align: 'center',
							sortable: 'custom'
						},
						{
							prop: 'startTime',
							label: '时间点',
							align: 'center',
							sortable: 'custom'
						},
						{
							prop: 'updateTime',
							label: '时间',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})

				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'slot-select', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					this.topList = subData;
					const list = await this.$service.integralMall.redPacket.list();
					let arr = [];
					list.map(e => {
						arr.push({
							label: e.startTime,
							value: e.sceneKey
						});
					});
					this.selectList = arr;
				})
				.done();
			app.refresh({
				scene: '1',
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	height: 160px;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-between;
		.money-li {
			flex: 1;
			text-align: center;
			.money-li-child {
				margin-top: 18px;
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
			}
			.title {
				color: $text-grey;
				font-size: 14px;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
</style>
